<template>
	<div class="home">
		<div class='head'>
            <p class='title-icon'>
            	<router-link class='iconfont icon-xinxi'to='/notification'></router-link>
            </p>
            <p class='title-text'>首页</p>
            <p class="title-null"></p>
        </div>
        <div class="title-menu">
        	<p class="new-release" @click='pending_call' :class="{ choseBg : isActive}">最新发布</p>
        	<p class="my-Orders" @click='already_call' :class="{ choseBg : !isActive}">指定我接单</p>
        </div>
        <div class="content-box">
        	<div class="chose-condition">
        			<span class="chose-time" @click='pending_call(1)' :class="{ choseBg : Active}">按时间</span>
        			<span class="chose-distance" @click='already_call(1)' :class="{ choseBg : !Active}">按距离</span>
        	</div>
        	<div class="content-info">
	        	<div class="info-distance">
	        		<p class="info-far">
	        			<span class="iconfont icon-dingwei"></span><span>距你800米</span>
	        		</p>
	        		<p class="info-to-detail">
	        			<router-link to='/orderdetail'><span>详情</span>
	        			<span class="iconfont icon-iconfontjiantouyou"></span></router-link>
	        		</p>
	        	</div>
	        	<div class="info">
	        		<p class="info-p"><span class="iconfont icon-yijiesuan"></span>收入&nbsp;&nbsp;8.00元</p>
	        		<p class="info-p"><span class="iconfont icon-jinlingyingcaiwangtubiao74">
	        		</span>取货&nbsp;&nbsp;今天11:30</p>
	        		<div class="order-info">
	        			<p><span class='order-info-left'>发货</span><span>清粥小菜</span></p>
	        			<p>
	        				<span class='order-info-left'></span>
	        				<span>遂宁市香林南路19号<label class="order-far">距收货1.5千米</label></span>
	        			</p>
	        			<p><span class='order-info-left'>收货</span><span>天府大道中段幸福小区19号</span></p>
	        			<p><span class='order-info-left'>捎话</span><span>请马上来取货很紧急</span></p>
	        		</div>
	        	</div>
	        	<div class="buttons">
	        		<p class="ignore">忽略</p>
	        		<p class="single" @click="GrabSingle">抢单</p>
	        	</div>
	        	<confirm v-model='show' @on-cancel = 'onCancel' @on-confirm = 'onDefine'>
	        		<p class="conf-title">抢单成功!</p>
	        		<p class="conf-comtent">张绍，您好，您已经抢单成功，请您尽快取货。</p>
	        	</confirm>
        	</div>
        </div>
        
		<tabbar>
		      <tabbar-item selected link='/home'>
		        <span slot='icon' class="iconfont icon-comiishome"></span>
		        <span slot="label">首页</span>
		      </tabbar-item>
		      
		      <tabbar-item link='/orderlist'>
		        <span slot='icon' class="iconfont icon-liebiao-80"></span>
		        <span slot="label">订单</span>
		      </tabbar-item>
		      
		      <tabbar-item  link="/settlement">
		        <span slot='icon' class="iconfont icon-yijiesuan"></span>
		        <span slot="label">结算</span>
		      </tabbar-item>
		      
		      <tabbar-item badge='2' link='/personcenter'>
		        <span slot='icon' class="iconfont icon-xinxi"></span>
		        <span slot="label">我的</span>
		      </tabbar-item>
	      
    	</tabbar>
        
	</div>
</template>

<script>
//import footer from  '../components/footer.vue'
//import { Confirm } from 'vux'
import { Tabbar, TabbarItem ,Confirm, Alert} from 'vux'
export default {
  components: {
    Tabbar,
    TabbarItem,
    Confirm,
    Alert
//  'children':footer
  },
  data () {
    return {
      show:false,
      call:true,
      isActive:true,
      Active:true
  }
},
methods:{
		GrabSingle(){
	      this.show = true;
	    },
	    onCancel(){
	      console.log("取消")
	    },
	    onDefine(){
	      console.log("确定")
	    },
	    pending_call(obj){
	      this.call=true
	      if(obj != 1){
	      	this.isActive=true
	      }else{this.Active = true};
	      
	    },
	    already_call(obj){
	      this.call=false
	      if(obj != 1){
	      	this.isActive=false
	      }else{this.Active = false};
	    }
	}
}
</script>

<style scoped>
	.home{
		margin-bottom: 60px;
	}
	.title-icon > a{
		font-size: 1.3rem;
	} 
	.title-menu{
		height: 40px;
		display:flex;
	}
	.new-release,.my-Orders{
		background-color: #CCCCCC;
		color: white;
		height: 100%;
		line-height: 40px;
		text-align: center;
		width: 49%;
		display: inline-block;
		border: 0px;
		margin: 0px;
		flex:1;
	}
	.choseBg{
		background-color: #71B4EB !important;
	}
	.content-box{
		margin: 5px 10px 10px 10px;
	}
	.chose-condition{
		height: 35px;
		line-height: 35px;
		padding-left: 15px;
		background-color: white;
	}
	.chose-distance,.chose-time{
		display: inline-block;
		height: 25px;
		line-height: 25px;
		font-size: .8rem;
		width: 50px;
		text-align: center;
		color: white;
		background-color: #999999;
	}
	.chose-distance{
		margin-left: -3px;
	}
	.info-distance{
		display: flex;
		height: 35px;
		padding: 0px 5px 0px 5px;
		border: 1px #ebebeb solid;
	}
	.content-info{
		margin-top: 5px;
		
		background-color: white;
	}
	.info-far{
		flex: 1;
		line-height: 35px;
	}
	.info-to-detail{
		flex: 1;
		text-align: right;
		color: #23A6F3;
	}
	.order-far{
		display: inline-block;
		margin-left: 15px;
	}
	.icon-dingwei{
		color: #FF900D;
		display: inline-block;
		margin-right: 8px;
		vertical-align: middle;
	}
	.icon-iconfontjiantouyou{
		display: inline-block;
		margin-left: 8px;
		font-size: .8rem;
		vertical-align: middle;
	}
	hr{
		border: .1px #cccccc solid;
	}
	.info-p{
		margin: 0px;
	}
	.info-p > span{
		display: inline-block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #999999;
		font-size: 1.2rem;
	}
	.info-left > p{
		color: #cccccc;
	}
	.order-info{
		color: #cccccc;
		font-size: .8rem;
		margin-left: 30px;
		line-height: 30px;
	}
	.order-far{
		color:#71B4EB;
	}
	.order-info-left{
		display: inline-block;
		width: 30px;
		margin-right: 10px;
	}
	.buttons{
		display: flex;
	}
	.ignore,.single{
		flex: 1;
		text-align: center;
		color: #cccccc;
		border-top: 1px #ebebeb solid;
		height: 40px;
		line-height: 40px;
		margin: 0px;
	}
	.single{
		color: white;
		background-color: #71B4EB;
	}
	.info-to-detail{
		line-height: 35px;
	}
	.info-to-detail >a{
		color:#71B4EB;
	}
	.addr{
		display: inline-block;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    width: 60%;
	}
	
	/*confirm*/
	.conf-title{
		font-size: 1.5rem;
		margin-bottom: 15px;	
	}
	.conf-comtent,.conf-title{
		color: #5D6065;
	}
</style>
